<template>
	<view class="box-good-choice">
		<view class="title">
			<text class="text-left">专题精选</text>
			<view @click="open_more" class="text-right">
				<text>更多</text>
				<uni-icons class="deep-color" type="more"></uni-icons>
			</view>
		</view>

		<view class="grid-good-choice">
			<theme-item
				:name="item.name"
				:create_time="item.create_time"
				:src="item.url"
				v-for="item in arr_theme.value"
				:key="item.id"
				@tap="open_themeColumn(item.category)"
			/>
			<theme-item-more @click="open_more" />
		</view>
	</view>
</template>
<script setup>
import { reactive, onBeforeMount } from 'vue'
import { get_theme } from '../../../api'

const arr_theme = reactive({ value: [] })

const api_get_theme = async function () {
	let res = await get_theme(1, 5)

	res.data.forEach((i, index) => {
		let temp_time = new Date(i.create_time)
		res.data[index]['create_time'] = temp_time.getTime()
	})

	arr_theme.value = res.data
}

onBeforeMount(() => {
	api_get_theme()
})

const open_themeColumn = function (category) {
	let arg = '?category=' + category
	uni.navigateTo({
		url: '/pages/themeColumn/themeColumn' + arg
	})
}

const open_more = function () {
	uni.switchTab({
		url: '/pages/classify/classify'
	})
}
</script>

<style scoped lang="scss">
.box-good-choice {
	margin-top: 30rpx;
	.title {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.text-left {
			font-size: 32rpx;
			padding: 0 10rpx;
			color: #3e3e3e;
			font-style: italic;
			background: linear-gradient(to right, #ffb5af, #ffffff);
			// background: radial-gradient(circle, #ffc3b8, #ffffff);
		}

		.text-right {
			height: 40rpx;
			font-size: 29rpx;
			border-radius: 100rpx;
			padding: 0 15rpx;
			background-color: rgba(236, 236, 236, 0.7);
			box-shadow: 0 0 30rpx $my-color1;
			color: $my-color1;
			@extend .f-c-c-n;
		}
	}

	.grid-good-choice {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-items: center;
		align-items: center;
		grid-gap: 10rpx;
	}
}
</style>
